import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { ConfigProvider, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';

import styles from '../style/app.module.less';
import { useEffect } from 'react';
import MyHeader from '../components/MyHeader';

const myTheme = {
  token: {
    // Seed Token，影响范围大
    // colorPrimary: '#00b96b',
    // borderRadius: 2,

    // 派生变量，影响范围小
    // colorBgContainer: '#f6ffed',
  },
}

const Index: React.FC = (props) => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const navigate = useNavigate();
  const location = useLocation()
  useEffect(() => {
    if (location.pathname === '/') {
      navigate('/bloglist')
    }
  }, [location, navigate])

  return (
    <ConfigProvider locale={zhCN} theme={myTheme}>
      <MyHeader />
      <main className={styles.main}>
        <div className={styles.container}>
          <Outlet />
        </div>
        <section className={styles.footer}>
          <span>©{new Date().getFullYear()} beiyulake.com 版权所有 </span>
          <a 
            href="https://beian.miit.gov.cn/#/Integrated/index" 
            target="_blank" 
            rel="noopener noreferrer"
          >
            京ICP备2024061688号-1
          </a>
        </section>
      </main>

    </ConfigProvider>
  );
}

export default Index;
